<template>
  <div class="existing wd1200">
    <el-row class="list-box" :gutter="20">
      <el-col v-for="(item, index) in list" :key="item.title" :span="12">
        <div class="classify" @click="toUrl(item)">
          <div>
            <img :src="item.icon" alt="">
            <span>{{ item.title }}</span>
          </div>
          <div>
            <span v-loading="loading" class="color-o" style="text-align: end;display: inline-block;min-width: 80px">{{ index === 4 ? (counts[index]/10000).toFixed(2) : counts[index] }}
              <span v-if="index === 4">亿元</span>
              <span v-else-if="index === 5">人</span>
              <span v-else-if="index === 6">个</span>
              <span v-else-if="index === 7">项</span>
              <span v-else>家</span>
            </span>
            <img src="../../../../assets/images/busNeighbors/r.png" alt="" class="right-icon">
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <v-title color="#FF8C1A" background-color="#FFF3E8" title="企业注册资金分析" />
        <div class="con">
          <p class="m-tit">企业注册资金分析</p>
          <v-pie-charts v-loading="loading1" :data="registerEcharts" unit="亿元" lengend-title="家" :title="(counts[4]/10000).toFixed(2)" />
        </div>
      </el-col>
      <el-col :span="12">
        <v-title color="#FF8C1A" background-color="#FFF3E8" title="知识产权拥有量" />
        <div class="con">
          <p class="m-tit">知识产权拥有量</p>
          <v-pie-charts v-loading="loading1" :data="intellectualEcharts" unit="项" lengend-title="项" :title="counts[7]" />
        </div>
      </el-col>
      <el-col :span="12">
        <v-title color="#0071DF" background-color="#E5F2FF" title="企业社保人数规模分析" />
        <div class="con" style="height: 402px;">
          <p class="m-tit">企业社保人数规模分析</p>
          <v-bar-charts v-loading="loading1" :data="socialEcharts" />
        </div>
      </el-col>
      <el-col :span="12">
        <v-title color="#0071DF" background-color="#E5F2FF" title="企业行业分析Top10" />
        <div class="con">
          <el-table
            v-loading="loading1"
            :data="tableData"
            height="401"
            style="width: 100%"
            border
            size="mini"
            :highlight-selection-row="true"
            :highlight-current-row="true"
            :stripe="true"
            :header-cell-style="{color:'#000000',fontSize:'12px',fontWeight:'500'}"
            :cell-style="{fontSize:'12px',color:'#000000',fontWeight:'500'}"
            @row-click="rowClick"
          >
            <el-table-column
              type="index"
              label="排序"
              width="80"
              align="center"
            />
            <el-table-column
              prop="industryL1Name"
              label="行业名称"
              align="left"
              width="240"
            />
            <el-table-column
              prop="total"
              align="right"
              label="数量（家）"
              class-name="num"
              label-class-name="header-num"
            >
              <template slot-scope="scope">
                <span style="color: #0071DF;">{{ scope.row.total }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import vTitle from '@/components/busNeighbors/title'
import vBarCharts from './barCharts.vue'
import vPieCharts from './pieCharts.vue'
import { company_industry_top_list, company_in_camp_count, company_capital_num_total, annual_report_social_security_count, company_employment_total, intellectual_property, company_base_list_by_capital_count, company_industry_top, annual_report_social_security_chart, intellectual_property_ratio } from '@/api/busNeighbors'
import { template } from 'lodash'
export default {
  name: 'Existing',
  components: {
    vTitle, vBarCharts, vPieCharts
  },
  data() {
    return {
      list: [{
        icon: require('@/assets/images/busNeighbors/1.png'),
        title: '入驻企业',
        num: '2000家',
        api: 'company_base_list_by_type',
        url: '/bus-neighbors/list',
        params: {
          companyMajorType: 3,
          endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
          lyComType: 5,
          lyId: Number(this.$route.query.id),
          pageNumber: 1,
          pageSize: 10
        }
      },
      {
        icon: require('@/assets/images/busNeighbors/2.png'),
        title: '在地不在册',
        num: '2000家',
        api: 'company_base_list_by_type',
        url: '/bus-neighbors/list',
        params: {
          companyMajorType: 3,
          endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
          lyComType: 2,
          lyId: Number(this.$route.query.id),
          pageNumber: 1,
          pageSize: 10,
          startDate: this.$dayjs().startOf('month').format('YYYY-MM-DD')
        }
      },
      {
        icon: require('@/assets/images/busNeighbors/3.png'),
        title: '疑似在地不在册',
        num: '2000家',
        api: 'company_base_list_by_type',
        url: '/bus-neighbors/list',
        params: {
          companyMajorType: 3,
          endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
          lyComType: 3,
          lyId: Number(this.$route.query.id),
          pageNumber: 1,
          pageSize: 10,
          startDate: this.$dayjs().startOf('month').format('YYYY-MM-DD')
        }
      },
      {
        icon: require('@/assets/images/busNeighbors/4.png'),
        title: '地址异常企业',
        num: '2000家',
        api: 'company_base_list_by_type',
        url: '/bus-neighbors/list',
        params: {
          companyMajorType: 3,
          endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
          lyComType: 4,
          lyId: Number(this.$route.query.id),
          pageNumber: 1,
          pageSize: 10,
          startDate: this.$dayjs().startOf('month').format('YYYY-MM-DD')
        }
      },
      {
        icon: require('@/assets/images/busNeighbors/5.png'),
        title: '注册资本',
        num: '2000家',
        api: 'company_base_list_by_type',
        url: '/bus-neighbors/list',
        params: {
          companyMajorType: 3,
          endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
          lyComType: 5,
          lyId: Number(this.$route.query.id),
          pageNumber: 1,
          pageSize: 10,
          startDate: this.$dayjs().startOf('month').format('YYYY-MM-DD')
        }
      },
      {
        icon: require('@/assets/images/busNeighbors/6.png'),
        title: '参保人员',
        num: '2000家',
        api: 'annual_report_social_security_list',
        url: '/bus-neighbors/list',
        params: {
          endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
          companyMajorType: 3,
          lyComType: 5,
          lyId: Number(this.$route.query.id),
          pageNumber: 1,
          pageSize: 10
        }
      },
      {
        icon: require('@/assets/images/busNeighbors/7.png'),
        title: '发布招聘岗位',
        num: '2000家',
        api: 'company_employment_list',
        url: '/bus-neighbors/publish',
        params: {
          endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
          lyComType: 5,
          lyId: Number(this.$route.query.id),
          pageNumber: 1,
          pageSize: 10
        }
      },
      {
        icon: require('@/assets/images/busNeighbors/8.png'),
        title: '知识产权',
        num: '2000家',
        api: 'intellectual_property_page',
        url: '/bus-neighbors/intellectual',
        params: {
          endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
          lyId: Number(this.$route.query.id),
          pageNumber: 1,
          pageSize: 10,
          startDate: this.$dayjs().startOf('month').format('YYYY-MM-DD')
        }
      }],
      tableData: [{
        name: '制造业',
        num: '1,123'
      }, {
        name: '建筑业',
        num: '1,123'
      }, {
        name: '农业',
        num: '1,123'
      }, {
        name: '计算机服务与软件',
        num: '1,123'
      }],
      counts: [],
      registerEcharts: [],
      intellectualEcharts: [],
      socialEcharts: [],
      loading: true,
      loading1: true
    }
  },
  async mounted() {
    Promise.all([
      await company_in_camp_count({
        companyMajorType: 3,
        establishDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        lyId: Number(this.$route.query.id)
      }),
      await company_in_camp_count({
        companyMajorType: 3,
        establishDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        lyComType: 2,
        lyId: Number(this.$route.query.id)
      }),
      await company_in_camp_count({
        companyMajorType: 3,
        establishDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        lyComType: 3,
        lyId: Number(this.$route.query.id)
      }),
      await company_in_camp_count({
        companyMajorType: 3,
        establishDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        lyComType: 4,
        lyId: Number(this.$route.query.id)
      }),
      await company_capital_num_total({
        establishDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        lyComType: 5,
        lyId: Number(this.$route.query.id)
      }),
      await annual_report_social_security_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        lyId: Number(this.$route.query.id)
      }),
      await company_employment_total({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        lyId: Number(this.$route.query.id)
      }),
      await intellectual_property({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        lyComType: 5,
        lyId: Number(this.$route.query.id)
      })
    ]).then(res => {
      this.loading = false
      this.counts = res.map(item => item.data && (item.data.content[0].count || item.data.content[0].total || item.data.content[0].capitalNumTotal) || 0)
    })
    Promise.all([
      await company_base_list_by_capital_count({
        companyMajorType: 3,
        establishDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        lyComType: 1,
        lyId: Number(this.$route.query.id)
      }),
      await intellectual_property_ratio({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        lyComType: 5,
        lyId: Number(this.$route.query.id)
      }),
      await annual_report_social_security_chart({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        lyComType: 5,
        lyId: Number(this.$route.query.id)
      }),
      await company_industry_top({
        establishDateEnd: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        lyComType: 5,
        lyId: Number(this.$route.query.id)
      })
    ]).then(res => {
      console.log(1, res)
      this.registerEcharts = [{
        name: '500万以下',
        value: res[0].data.content.filter(item => item.capitalRange === '500万以下').reduce((total, num) => total + num.companyCount, 0)
      }, {
        name: '500-1000万',
        value: res[0].data.content.filter(item => item.capitalRange1 === '500-1000万').reduce((total, num) => total + num.companyCount, 0)
      }, {
        name: '1000万-2000万',
        value: res[0].data.content.filter(item => item.capitalRange2 === '1000万-2000万').reduce((total, num) => total + num.companyCount, 0)
      }, {
        name: '2000万以上',
        value: res[0].data.content.filter(item => item.capitalRange3 === '2000万以上').reduce((total, num) => total + num.companyCount, 0)
      }]
      // const registers = res[0].data.content.filter(item => {
      //   if (Object.values(item).filter(a => a).length === 2) return true
      // })
      // this.registerEcharts = registers.map(item => {
      //   return {
      //     name: Object.values(item).filter(a => a)[1],
      //     value: Object.values(item).filter(a => a)[0]
      //   }
      // })
      this.intellectualEcharts = res[1].data.content.map(item => {
        return {
          name: item.title,
          value: item.total
        }
      })
      this.socialEcharts = res[2].data.content
      this.tableData = res[3].data.content
      this.loading1 = false
    })
  },
  methods: {
    toUrl(item) {
      this.$router.push({ path: item.url, query: { data: JSON.stringify(item), companyNames: this.$route.query.name }})
    },
    rowClick(row, column, event) {
      this.$router.push({ path: '/bus-neighbors/list', query: { data: JSON.stringify({
        title: '企业行业分析',
        api: 'company_industry_top_list',
        url: '/bus-neighbors/list',
        searchApi: [{
          api: 'company_industry_top_chart',
          params: {
            establishDateEnd: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            industryL1Name: row.industryL1Name,
            lyComType: 5,
            lyId: Number(this.$route.query.id)
          }
        }, {
          api: 'company_industry_top_year_count',
          params: {
            establishDateEnd: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            industryL1Name: row.industryL1Name,
            lyComType: 5,
            lyId: Number(this.$route.query.id)
          }
        }],
        params: {
          establishDateEnd: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
          industry: row.industryL1Name,
          lyComType: 5,
          lyId: Number(this.$route.query.id),
          pageNumber: 1,
          pageSize: 10
        }
      }), companyNames: this.$route.query.name }})
    }
  }
}
</script>
<style lang="scss" scoped>
.existing {
  .list-box{
    width: 100%;
    padding-left: 20px;
  }
  .classify{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 10px 10px;
    background: #FFFFFF;
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #E8EAEC;
    margin-bottom: 20px;
    .right-icon{
      width: 14px;
      height: 14px;
    }
    img{
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
    div{
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #000000;
    }
    .color-o {
      color: #FF8C1A;
    }
  }
  .con{
    width: 100%;
    border: 1px solid #E8EAEC;
    margin-bottom: 20px;
    // height: 300px;
    .m-tit{
      padding-left: 26px;
      font-weight: 700;
      margin: 0;
      height: 50px;
      line-height: 50px;
      font-family: PingFang SC, PingFang SC;
    }
  }
  ::v-deep .el-table__row{
    height: 36px;
  }
}
</style>
<style>
.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border-color: transparent !important;
}
</style>

